import React from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { FaReact, FaNodeJs, FaDatabase, FaMobileAlt, FaServer, FaPalette } from 'react-icons/fa';
import './SkillsSection.css';

const SkillsSection = () => {
  // 使用intersection observer检测元素是否可见
  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1
  });

  // 动画变体
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  // 技能数据
  const skills = [
    {
      icon: <FaReact />,
      title: '前端开发',
      description: '使用React, Vue等现代框架创建响应式、高性能的用户界面',
      technologies: ['React', 'Vue', 'JavaScript', 'HTML/CSS', 'Tailwind CSS']
    },
    {
      icon: <FaNodeJs />,
      title: '后端开发',
      description: '构建可扩展的服务器端应用程序和API',
      technologies: ['Node.js', 'Express', 'Python', 'Java', 'RESTful API']
    },
    {
      icon: <FaDatabase />,
      title: '数据库',
      description: '设计和优化数据库架构，确保高效数据存储和检索',
      technologies: ['MongoDB', 'MySQL', 'PostgreSQL', 'Redis', 'Firebase']
    },
    {
      icon: <FaMobileAlt />,
      title: '移动应用开发',
      description: '开发跨平台移动应用，提供原生体验',
      technologies: ['React Native', 'Flutter', 'iOS', 'Android', 'PWA']
    },
    {
      icon: <FaServer />,
      title: 'DevOps',
      description: '自动化部署流程，确保应用程序的可靠性和可扩展性',
      technologies: ['Docker', 'CI/CD', 'AWS', 'Azure', 'Kubernetes']
    },
    {
      icon: <FaPalette />,
      title: 'UI/UX设计',
      description: '创建直观且视觉吸引力的用户界面和体验',
      technologies: ['Figma', 'Adobe XD', 'Sketch', '原型设计', '用户测试']
    }
  ];

  return (
    <section className="skills-section section">
      <div className="container">
        <div className="section-header">
          <h2 className="section-title">专业技能</h2>
          <p className="section-subtitle">
            我擅长各种现代技术，为客户提供全方位的解决方案
          </p>
        </div>

        <motion.div 
          className="skills-grid"
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={inView ? 'visible' : 'hidden'}
        >
          {skills.map((skill, index) => (
            <motion.div key={index} className="skill-card" variants={itemVariants}>
              <div className="skill-icon">{skill.icon}</div>
              <h3 className="skill-title">{skill.title}</h3>
              <p className="skill-description">{skill.description}</p>
              <div className="skill-technologies">
                {skill.technologies.map((tech, i) => (
                  <span key={i} className="skill-tag">{tech}</span>
                ))}
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export default SkillsSection;
